<template>
    <el-card style="margin: 10px 0">
        <div slot="header" class="clearfix">
            <!-- 头部左侧内容 -->
            <el-tabs class="tab" v-model="activeName">
                <el-tab-pane label="销售额" name="sale"></el-tab-pane>
                <el-tab-pane label="访问量" name="visit"></el-tab-pane>
            </el-tabs>

            <!-- 头部右侧内容 -->
            <div class="right">
                <span @click="setDay">今日</span>
                <span @click="setWeek">本周</span>
                <span @click="setMonth">本月</span>
                <span @click="setYear">本年</span>
                <el-date-picker type="datetimerange" range-separator="-" start-placeholder="开始日期"
                                v-model="date" value-format="yyyy-MM-dd"
                                class="date" end-placeholder="结束日期" size="mini">
                </el-date-picker>
            </div>
        </div>

        <div>
            <el-row :gutter="10">
                <el-col :span="18">
                    <div class="charts" ref="charts"></div>
                </el-col>
                <el-col :span="6">
                    <h3>门店{{title}}排名</h3>
                    <ul>
                        <li>
                            <span class="rindex">0</span>
                            <span class="rshop">肯德基</span>
                            <span class="rvalue">12312</span>
                        </li>
                        <li>
                            <span class="rindex">1</span>
                            <span class="rshop">肯德基</span>
                            <span class="rvalue">12312</span>
                        </li>
                        <li>
                            <span class="rindex">2</span>
                            <span class="rshop">肯德基</span>
                            <span class="rvalue">12312</span>
                        </li>
                        <li>
                            <span>3</span>
                            <span class="rshop">肯德基</span>
                            <span class="rvalue">12312</span>
                        </li>
                        <li>
                            <span>4</span>
                            <span class="rshop">肯德基</span>
                            <span class="rvalue">12312</span>
                        </li>
                        <li>
                            <span>5</span>
                            <span class="rshop">肯德基</span>
                            <span class="rvalue">12312</span>
                        </li>
                        <li>
                            <span>6</span>
                            <span class="rshop">肯德基</span>
                            <span class="rvalue">12312</span>
                        </li>
                    </ul>
                </el-col>
            </el-row>
        </div>
    </el-card>
</template>

<script>
    import echarts from 'echarts'
    import dayjs from 'dayjs'
    import {mapState} from 'vuex'

    export default {
        data() {
            return {
                activeName: 'sale',
                myCharts: null,
                // 收集日历数据
                date: []
            }
        },

        computed: {
            title() {
                return this.activeName==='sale'? '销售额': '访问量';
            },

            ...mapState({
                listState: state => state.home.list,
            }),
        },

        methods: {
            // 点击今日
            setDay() {
                const day = dayjs().format('YYYY-MM-DD');

                this.date = [day,day];

            },

            // 点击本周
            setWeek() {
                const start = dayjs().day(1).format('YYYY-MM-DD');
                const end = dayjs().day(0).format('YYYY-MM-DD');

                this.date = [start,end];
            },

            // 点击本月
            setMonth() {
                const start = dayjs().startOf('month').format('YYYY-MM-DD');
                const end = dayjs().endOf('month').format('YYYY-MM-DD');

                this.date = [start,end];
            },

            setYear() {
                const start = dayjs().startOf('year').format('YYYY-MM-DD');
                const end = dayjs().endOf('year').format('YYYY-MM-DD');

                this.date = [start,end];
            }
        },

        // mounted只会执行一次
        mounted() {
            this.myCharts = echarts.init(this.$refs.charts);
            this.myCharts.setOption({
                title: {
                    text: '销售额趋势',
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        data: [],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: 'Direct',
                        type: 'bar',
                        barWidth: '60%',
                        data: [],
                        color: 'yellowgreen'
                    }
                ]
            })
        },

        // 监听属性
        watch: {
            title() {
                // 重新修改图标的配置数据
                this.myCharts.setOption({
                    title: {
                        text: this.title+'趋势'
                    },
                    xAxis: {
                        data: this.title==='销售额'?this.listState.orderFullYearAxis:this.listState.userFullYearAxis,
                    },
                    series: [
                        {
                            name: 'Direct',
                            type: 'bar',
                            barWidth: '60%',
                            data: this.title ==='销售额'?this.listState.orderFullYear:this.listState.userFullYear,
                            color: 'yellowgreen'
                        }
                    ]
                })
            },

            listState() {
                this.myCharts.setOption({
                    title: {
                        text: '销售额趋势',
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: this.listState.orderFullYearAxis,
                            axisTick: {
                                alignWithLabel: true
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: 'Direct',
                            type: 'bar',
                            barWidth: '60%',
                            data: this.listState.orderFullYear,
                            color: 'yellowgreen'
                        }
                    ]
                })
            }
        },
        name: "Sale"
    }
</script>

<style scoped>
    .clearfix {
        display: flex;
        justify-content: space-between;
        position: relative;
    }
    .tab {
        width: 100%;
    }
    .right {
        position: absolute;
        right: 0;
    }
    .date {
        width: 250px;
        margin: 0 20px;
    }
    .right span {
        margin: 0 10px;
    }
    .charts {
        height: 300px;
        width: 100%;
    }
    ul {
        list-style: none;
        width: 100%;
        height: 300px;
        padding: 0;
    }
    ul li {
        height: 8%;
        margin: 10px 0;
    }
    .rindex {
        float: left;
        width: 20px;
        height: 20px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        background-color: black;
        color: #fff;
        text-align: center;
    }
    .rshop {
        padding: 0 20px;
    }
    .rvalue {
        float: right;
    }
</style>
